<!DOCTYPE html>
<html lang="en">
<head>
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="renderer" content="webkit"> 
	<meta content="always" name="referrer">
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>更换密保邮箱</title>
    <!--[if lt IE 9]>
			<script type="text/javascript">
				window.location.href = "tip.html"
			</script>
		<![endif]-->
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/email.css">
    <script src="js/jquery.min.js"></script>
    <script src="js/wang.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/jquery.md5.js" type="text/javascript" charset="utf-8"></script>
    <script src="lib/layui/layui.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/ajaxSet.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="header w-100bfb clearfloat">
    <div class="w-1200">
        <ul class="fl">WELCOME</ul>
        <ul class="fr">没有账号？请 <a href="register.html">注册</a></ul>
    </div>
</div>
<div class="container w-1150">
    <div class="title">更换密保邮箱</div>
    <div class="bar">
        <ul class="first">
            <li class="num"><i class="active">1</i></li>
            <li class="desc">输入邮箱</li>
        </ul>
        <ul class="second">
            <li class="num"><i>2</i></li>
            <li class="desc">安全验证</li>
        </ul>
        <ul class="third">
            <li class="num"><i>3</i></li>
            <li class="desc">修改密码</li>
        </ul>
    </div>
    <div class="item">
        <div class="lift1">
            <ul class="inpLift clearfloat">
                <li class="fl">账号：</li>
                <li class="fr"><input type="email" id="userName"></li>
            </ul>
            <ul class="inpLift clearfloat">
                <li class="fl">密码：</li>
                <li class="fr"><input type="password" id="userPW"></li>
            </ul>
            <ul class="tip clearfloat inpLift">
                <li class="fl"></li>
                <li class="fr">
                	
                </li>
            </ul>
            <ul class="next1 next">下一步</ul>
        </div>

        <div class="lift2">
            <ul class="inpLift clearfloat">
                <li class="fl">输入新邮箱 :</li>
                <li class="fr">
                    <input type="text" id="newEmail">
                </li>
            </ul>
            <ul class="inpLift clearfloat">
                <li class="fl">验证码 ：</li>
                <li class="fr">
                    <input type="text" id="yzm">
                    <a class="getyzm">发送验证码</a>
                </li>
            </ul>
            <ul class="tip clearfloat inpLift">
                <li class="fl"></li>
                <li class="fr">
                	<!--<img src="11.jpg" alt="">账号\验证码输入错误-->
                </li>
            </ul>
            <ul class="next2 next">下一步</ul>
        </div>

        <div class="lift4">
            <img src="img/star.png" alt="">
            <p>密保设置成功</p>
        </div>
    </div>
</div>
<div id="qq"></div>
</body>
</html>
<script>
	layui.use(['layer'], function() {
		
		$("#qq").load("http://52lvu.cn/qq.html")
		var re = /^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/; 
    	var layer = layui.layer;
    	
    	var token = JSON.parse(localStorage.getItem('token'));
    	if(token){

    	}else{
    		layer.msg("请登录后重试",{icon:2,time:2000})
    	}
    	
	    $(".next1").on("click",function () {
	    	$.ajax({
	    		type:"post",
	    		url:"http://52lvu.cn:8080/api/user/validateUser",
	    	    data:{
	    	    	email : $("#userName").val(),
	    	        password : $("#userPW").val()
	    	    },success : function (result){
	    	        

	    	        
	    	        if (result.resultCode == 200) {
		    	        $(".lift1").hide();
				        $(".lift2").show();
				        $(".second i").addClass("active");
	    	        } else{
	    	        	layer.msg("您输入的信息有误，请重试",{icon:2,time:3000});
	    	        }

	    	    },error : function (e){
	    	        layer.msg("请求错误，请稍后重试",{icon:2,time:3000});
	    	        
	    	    }
	    	});
	        
	    });
	    
	    
	    $(".getyzm").on("click",function (){
		
			var str = $("#newEmail").val() ;
				
			if (re.test(str)) {
				$.ajax({
					type:"post",
					url:"http://52lvu.cn:8080/api/login/getCaptch",
					data:{
						email : $("#newEmail").val(),
						state : 4
					},success : function (result){

						
						if(result.resultCode == 200){
							invokeSettime(".getyzm")
						}else if (result.resultCode == 108){
							layer.msg("您的邮箱已经注册，请直接登录",{icon:2,time:3000});
						}
						
					},error : function (){
						layer.msg("请求错误！请稍候重试",{icon:2,time:3000});
					}
				});
			} else{
				layer.msg("请输入格式正确的邮箱",{icon:2,time:3000});
			}
		})
	    
		function invokeSettime(obj){
		    var countdown = 60 ;
		    settime(obj);
		    function settime(obj) {
		    	$(".getyzm").unbind();
		        if (countdown == 0) {
		            $(obj).text("获取验证码");
		            $(obj).on("click",function(){
		                getYZM()
		            })
		            countdown = 300;
		            return;
		        } else {
		            $(obj).text("(" + countdown + ") s 重新发送");
		            countdown--;
		        }
		        setTimeout(function() {
		        	settime(obj) 
		        },1000)
		    }
		}		    
	    
	    $(".next2").on("click",function () {
	    	
	    	
	    	$.ajax({
	    		type:"post",
	    		url:"http://52lvu.cn:8080/api/user/updateEmail",
	    	    data:{
					token : token.token,
					userId : token.id,
	    	        email : $("#newEmail").val(),
	    	        captch : $("#yzm").val()
	    	    },success : function (result){
	    	        

	    	        if (resultCode == 200) {
	    	        	layer.msg("邮箱修改成功，请您重新登录",{icon:1,time:3000});
	    	        	setTimeout(function(){
	    	        	    location.href = "login.html";
	    	        	},2000)
	    	        } else{
	    	        	layer.msg("请求错误，请稍后重试",{icon:2,time:3000});
	    	        }
	    	        
	    	    },error : function (e){
	    	        layer.msg("请求错误，请稍后重试",{icon:2,time:3000});
	    	    }
	    	});
	    	
	        $(".lift2").hide();
	        $(".lift4").show();
	        $(".third i").addClass("active");
	        
	    });
	})
</script>